<template>
	<view class="search-box">
		<view class="top-search">
			<input type="text" v-model="searchVal" placeholder="请输入您要搜索的商品" @input="Input">
			<view class="qx" @click="qx" v-show="searchVal">
				取消
			</view>
		</view>

		<!-- 搜索内容 -->
		<view class="search-cnt">
			<view class="cnt-item" v-for="item in list" :key="index" @click="tXqk(item.goods_id)">
				{{item.goods_name}}
			</view>
			
		</view>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		ref,
		toRefs
	} from 'vue'
	import {getSearchList} from '../../api/api'
	import * as Ts from '@/api/define'
	export default {
		setup() {
			const data = reactive < Ts.searchData > ({
				searchVal: '',
			})
			let list=ref('')
			const Input=()=>{
				getSearchList(data.searchVal).then(res=>{
					console.log(res);
					list.value=res.message.goods
					if(data.searchVal==''){
						list.value=''
					}
				})
			}
			const qx=()=>{
				list.value=''
				data.searchVal=''
			}
			const tXqk=(id)=>{
				uni.navigateTo({
					url:`/pages/Xqy/Xqy?id=${id}`
				})
			}

			return {
				...toRefs(data),
				Input,
				list,
				qx,
				tXqk
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		width: 100%;
		min-height: 100vh;
		background-color: #dedede;
		padding: 10px;

		.search-cnt {
			width: 100%;
			margin-top: 40rpx;
			background-color: #fff;

			.cnt-item {
				width: 100%;
				height: 62rpx;
				line-height: 62rpx;
				padding: 0 10px;
				box-sizing: border-box;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				border-bottom: 1px solid #eee;
			}
		}

		.top-search {
			width: 100%;
			display: flex;

			input {
				flex: 1;
				height: 60rpx;
				background-color: #fff;
				padding-left: 10px;
				box-sizing: border-box;
			}

			.qx {
				width: 15%;
				margin-left: 10px;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				text-align: center;
				border-radius: 5px;
			}
		}
	}
</style>
